<template>
  <div class="app-container">
    <div class="page-header">
      <el-button type="primary" size="large" @click="handleSubmit" class="save-button">
        保存
      </el-button>
    </div>

    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="诊所编号">
            <el-input v-model="form.clinicId" placeholder="10030" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诊所名称" prop="clinicName" required>
            <el-input v-model="form.clinicName" placeholder="**社区诊所" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诊所Logo">
            <div class="logo-container">
              <el-avatar :size="60" :src="form.logo">
                <img src="@/assets/images/profile.jpg" />
              </el-avatar>
              <el-button type="primary" link class="modify-btn">修改</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="诊所所有人" prop="owner">
            <el-input v-model="form.owner" placeholder="李明" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诊所所有人电话" prop="phone">
            <el-input v-model="form.phone" placeholder="18890978900" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诊所所有人邮箱" prop="email">
            <el-input v-model="form.email" placeholder="18890978900@163.com" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="address" class="address-container">
            <el-cascader
              v-model="form.region"
              :options="regionOptions"
              :props="{ expandTrigger: 'hover' }"
              placeholder="请选择所在地区"
              class="region-select"
            />
            <el-input v-model="form.detailAddress" placeholder="请输入详细地址" class="detail-address" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="诊所介绍" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="请输入诊所介绍"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="诊所状态">
            <el-switch v-model="form.status" active-color="#13ce66" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="到期时间">
            <el-date-picker
              v-model="form.expireTime"
              type="datetime"
              placeholder="请选择到期时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总用户数">
            <el-input-number 
              v-model="form.totalUsers" 
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)

// 地区选项数据
const regionOptions = [
  {
    value: 'guangdong',
    label: '广东省',
    children: [
      {
        value: 'shenzhen',
        label: '深圳市',
        children: [
          {
            value: 'futian',
            label: '福田区'
          },
          {
            value: 'luohu',
            label: '罗湖区'
          },
          {
            value: 'nanshan',
            label: '南山区'
          },
          {
            value: 'baoan',
            label: '宝安区'
          },
          {
            value: 'longgang',
            label: '龙岗区'
          },
          {
            value: 'yantian',
            label: '盐田区'
          },
          {
            value: 'pingshan',
            label: '坪山区'
          },
          {
            value: 'longhua',
            label: '龙华区'
          },
          {
            value: 'guangming',
            label: '光明区'
          }
        ]
      },
      {
        value: 'guangzhou',
        label: '广州市',
        children: [
          {
            value: 'tianhe',
            label: '天河区'
          },
          {
            value: 'haizhu',
            label: '海珠区'
          },
          {
            value: 'yuexiu',
            label: '越秀区'
          },
          {
            value: 'panyu',
            label: '番禺区'
          },
          {
            value: 'huadu',
            label: '花都区'
          },
          {
            value: 'nansha',
            label: '南沙区'
          },
          {
            value: 'conghua',
            label: '从化区'
          },
          {
            value: 'zengcheng',
            label: '增城区'
          }
        ]
      },
      {
        value: 'dongguan',
        label: '东莞市',
        children: [
          {
            value: 'nancheng',
            label: '南城区'
          },
          {
            value: 'dongcheng',
            label: '东城区'
          },
          {
            value: 'wanjiang',
            label: '万江区'
          },
          {
            value: 'shijie',
            label: '石碣镇'
          },
          {
            value: 'shilong',
            label: '石龙镇'
          },
          {
            value: 'changan',
            label: '长安镇'
          }
        ]
      }
    ]
  },
  {
    value: 'beijing',
    label: '北京市',
    children: [
      {
        value: 'chaoyang',
        label: '朝阳区'
      },
      {
        value: 'haidian',
        label: '海淀区'
      },
      {
        value: 'dongcheng',
        label: '东城区'
      },
      {
        value: 'xicheng',
        label: '西城区'
      },
      {
        value: 'fengtai',
        label: '丰台区'
      },
      {
        value: 'shijingshan',
        label: '石景山区'
      },
      {
        value: 'tongzhou',
        label: '通州区'
      },
      {
        value: 'changping',
        label: '昌平区'
      },
      {
        value: 'daxing',
        label: '大兴区'
      },
      {
        value: 'mentougou',
        label: '门头沟区'
      },
      {
        value: 'fangshan',
        label: '房山区'
      },
      {
        value: 'shunyi',
        label: '顺义区'
      },
      {
        value: 'pinggu',
        label: '平谷区'
      },
      {
        value: 'huairou',
        label: '怀柔区'
      },
      {
        value: 'miyun',
        label: '密云区'
      },
      {
        value: 'yanqing',
        label: '延庆区'
      }
    ]
  },
  {
    value: 'shanghai',
    label: '上海市',
    children: [
      {
        value: 'pudong',
        label: '浦东新区'
      },
      {
        value: 'huangpu',
        label: '黄浦区'
      },
      {
        value: 'xuhui',
        label: '徐汇区'
      },
      {
        value: 'putuo',
        label: '普陀区'
      },
      {
        value: 'jingan',
        label: '静安区'
      },
      {
        value: 'hongkou',
        label: '虹口区'
      },
      {
        value: 'yangpu',
        label: '杨浦区'
      },
      {
        value: 'minhang',
        label: '闵行区'
      },
      {
        value: 'baoshan',
        label: '宝山区'
      },
      {
        value: 'jiading',
        label: '嘉定区'
      },
      {
        value: 'jinshan',
        label: '金山区'
      },
      {
        value: 'songjiang',
        label: '松江区'
      },
      {
        value: 'qingpu',
        label: '青浦区'
      },
      {
        value: 'fengxian',
        label: '奉贤区'
      },
      {
        value: 'chongming',
        label: '崇明区'
      }
    ]
  },
  {
    value: 'zhejiang',
    label: '浙江省',
    children: [
      {
        value: 'hangzhou',
        label: '杭州市',
        children: [
          {
            value: 'shangcheng',
            label: '上城区'
          },
          {
            value: 'xiacheng',
            label: '下城区'
          },
          {
            value: 'jianggan',
            label: '江干区'
          },
          {
            value: 'gongshu',
            label: '拱墅区'
          },
          {
            value: 'xihu',
            label: '西湖区'
          },
          {
            value: 'binjiang',
            label: '滨江区'
          },
          {
            value: 'xiaoshan',
            label: '萧山区'
          },
          {
            value: 'yuhang',
            label: '余杭区'
          },
          {
            value: 'fuyang',
            label: '富阳区'
          },
          {
            value: 'linan',
            label: '临安区'
          }
        ]
      },
      {
        value: 'ningbo',
        label: '宁波市',
        children: [
          {
            value: 'haishu',
            label: '海曙区'
          },
          {
            value: 'jiangbei',
            label: '江北区'
          },
          {
            value: 'beilun',
            label: '北仑区'
          },
          {
            value: 'zhenhai',
            label: '镇海区'
          },
          {
            value: 'yinzhou',
            label: '鄞州区'
          },
          {
            value: 'fenghua',
            label: '奉化区'
          }
        ]
      }
    ]
  },
  {
    value: 'jiangsu',
    label: '江苏省',
    children: [
      {
        value: 'nanjing',
        label: '南京市',
        children: [
          {
            value: 'xuanwu',
            label: '玄武区'
          },
          {
            value: 'qinhuai',
            label: '秦淮区'
          },
          {
            value: 'jianye',
            label: '建邺区'
          },
          {
            value: 'gulou',
            label: '鼓楼区'
          },
          {
            value: 'pukou',
            label: '浦口区'
          },
          {
            value: 'qixia',
            label: '栖霞区'
          },
          {
            value: 'yuhuatai',
            label: '雨花台区'
          },
          {
            value: 'jiangning',
            label: '江宁区'
          },
          {
            value: 'liuhe',
            label: '六合区'
          },
          {
            value: 'lishui',
            label: '溧水区'
          },
          {
            value: 'gaochun',
            label: '高淳区'
          }
        ]
      },
      {
        value: 'suzhou',
        label: '苏州市',
        children: [
          {
            value: 'gusu',
            label: '姑苏区'
          },
          {
            value: 'huqiu',
            label: '虎丘区'
          },
          {
            value: 'wuzhong',
            label: '吴中区'
          },
          {
            value: 'xiangcheng',
            label: '相城区'
          },
          {
            value: 'wujiang',
            label: '吴江区'
          },
          {
            value: 'changshu',
            label: '常熟市'
          },
          {
            value: 'zhangjiagang',
            label: '张家港市'
          },
          {
            value: 'kunshan',
            label: '昆山市'
          },
          {
            value: 'taicang',
            label: '太仓市'
          }
        ]
      }
    ]
  }
]

// 表单数据
const form = reactive({
  clinicId: '10030',
  clinicName: '**社区诊所',
  logo: '',
  owner: '李明',
  phone: '18890978900',
  email: '18890978900@163.com',
  region: ['guangdong', 'shenzhen', 'futian'],
  detailAddress: '',
  description: '',
  status: true,
  expireTime: '2020-10-23 10:34:56',
  totalUsers: 35
})

// 表单验证规则
const rules = reactive({
  clinicName: [
    { required: true, message: '请输入诊所名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
})

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
  position: relative;
}

.page-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  padding: 0;
}

.save-button {
  font-weight: 500;
  padding: 12px 35px;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.save-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modify-btn {
  color: #409EFF;
}

.address-container {
  display: flex;
  gap: 10px;
}

.region-select {
  width: 320px;
}

.detail-address {
  flex: 1;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa;
}
</style>
